<template>
  <el-dialog
    :title="form.typeId ? '修改设备类型' :'新增设备类型'"
    :visible="addvisible"
    @close="close"
  >
    <el-form :model="form" ref="formdata" :rules="rules">
      <el-form-item label="型号名称：" label-width="120px" prop="name">
        <el-input
          v-model="form.name"
          autocomplete="off"
          placeholder="请输入"
          style="width: 80%"
          maxlength="10"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="型号编码：" label-width="120px" prop="model">
        <el-input
          v-model="form.model"
          autocomplete="off"
          placeholder="请输入（限制数字、字母、中划线、下划线）"
          style="width: 80%"
          maxlength="15"
          show-word-limit
        ></el-input>
      </el-form-item>
      <el-form-item label="货道行数：" label-width="120px" prop="vmRow">
        <el-input
          v-model="form.vmRow"
          autocomplete="off"
          placeholder="请输入"
          style="width: 80%"
        >
          <template #suffix>
            <div class="mybutton">
              <button class="top" :disabled="form.vmRow > 9" @click="form.vmRow++"><i class="el-icon-arrow-up"></i></button>
              <button class="bottom" :disabled="form.vmRow < 2" @click="form.vmRow--"><i class="el-icon-arrow-down"></i></button>
            </div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="货道列数：" label-width="120px" prop="vmCol">
        <el-input
          v-model="form.vmCol"
          autocomplete="off"
          placeholder="请输入"
          style="width: 80%"
        >
          <template #suffix>
            <div class="mybutton">
              <button class="top" :disabled="form.vmCol > 9" @click="form.vmCol++"><i class="el-icon-arrow-up"></i></button>
              <button class="bottom" :disabled="form.vmCol < 2" @click="form.vmCol--"><i class="el-icon-arrow-down"></i></button>
            </div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="货道容量："
        label-width="120px"
        prop="channelMaxCapacity"
      >
        <el-input
          v-model="form.channelMaxCapacity"
          autocomplete="off"
          placeholder="请输入"
          style="width: 80%"
        >
          <template #suffix>
            <div class="mybutton">
              <button class="top" :disabled="form.channelMaxCapacity > 9" @click="form.channelMaxCapacity++"><i class="el-icon-arrow-up"></i></button>
              <button class="bottom" :disabled="form.channelMaxCapacity < 2" @click="form.channelMaxCapacity--"><i class="el-icon-arrow-down"></i></button>
            </div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="设备图片：" label-width="120px" prop="image">
        <el-upload
          action=""
          class="avatar-uploader"
          :http-request="getFileUpload"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.image" :src="form.image" class="avatar" />
          <i v-else class="el-icon-upload avatar-uploader-icon"></i>
        </el-upload>
        <div>支持扩展名：jpg、png，文件不得大于100kb</div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { FileUpload, addVmType, updateVmType } from '@/api/device-type'
export default {
  name: 'AddDialog',
  props: {
    addvisible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      form: {
        channelMaxCapacity: '',
        image: '',
        model: '',
        name: '',
        vmRow: '',
        vmCol: ''
      },
      rules: {
        name: [{ required: true, message: '请输入型号名称', trigger: 'blur' }],
        model: [
          { required: true, message: '请输入型号编码', trigger: 'blur' },
          {
            pattern: /^\w|-$/g,
            message: '请输入合法的型号编码',
            trigger: 'blur'
          }
        ],
        vmRow: [{ required: true, message: '请输入货道行数', trigger: 'blur' }],
        vmCol: [{ required: true, message: '请输入货道列数', trigger: 'blur' }],
        channelMaxCapacity: [
          { required: true, message: '请输入货道容量', trigger: 'blur' }
        ],
        image: [{ required: true, message: '请选择设备图片', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 关闭
    close () {
      this.form = {
        channelMaxCapacity: '',
        image: '',
        model: '',
        name: '',
        vmRow: '',
        vmCol: ''
      }
      this.$refs.formdata.resetFields()
      this.$emit('update:addvisible', false)
    },
    // 提交
    async onSubmit () {
      try {
        await this.$refs.formdata.validate()
        if (this.form.typeId) {
          const res = await updateVmType(this.form)
          console.log(res)
          this.$message({ type: 'success', message: '修改成功' })
        } else {
          await addVmType(this.form)
          this.$message({ type: 'success', message: '添加成功' })
        }
        this.close()
        this.$parent.getTypeList()
      } catch (e) {
        if (e.response) this.$message({ type: 'error', message: e.response.data })
      }
    },
    // 图片上传
    async getFileUpload (file) {
      const formData = new FormData()
      formData.append('fileName', file.file)
      this.form.image = await FileUpload(formData)
      this.$message({ type: 'success', message: '上传图片成功' })
    },
    // 校验图片格式
    beforeAvatarUpload (file) {
      // 获取后缀名
      const suffix = file.name.substring(file.name.lastIndexOf('.') + 1)
      // 判断是否符合文件大小的限制需求
      const isLt2M = file.size / 1024 / 1024 < 0.1
      // 判断是否符合文件类型需求
      const accept = 'jpg/png'
      const isLtType = accept.indexOf(suffix) >= 0
      if (!isLtType) {
        this.$message({
          message: `上传文件格式必须为${accept}`,
          type: 'warning'
        })
      }
      if (!isLt2M) {
        this.$message({
          message: '上传文件大小不能超过100KB!',
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style lang="scss">
  .el-dialog {
    .el-input--suffix .el-input__inner{
      text-align: center;
    }
    .mybutton {
      display: flex;
      flex-direction: column;
      .top,
      .bottom {
        position: absolute;
        width: 40px;
        height: 50%;
        border: 0;
        border-left: 1px solid #d8dde3;
        background: #f8fafd;
        color: #606266;
      }
      .top {
        top: 1px;
        right: -4px;
        border-radius: 0 4px 0 0;
        border-bottom: 1px solid #d8dde3;
      }
      .bottom {
        bottom: 1px;
        right: -4px;
        border-radius: 0 0 4px 0;
      }
    }
    border-radius: 10px;
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 84px;
      height: 84px;
      line-height: 84px;
      text-align: center;
    }
    .avatar {
      width: 84px;
      height: 84px;
      display: block;
    }
    .el-dialog__title {
      font-size: 16px;
      font-weight: 700;
    }
    .el-dialog__body {
      padding: 10px 10px 30px 50px !important;
    }
    .dialog-footer {
      text-align: center;
      .el-button--primary {
        background: linear-gradient(135deg, #ff9743, #ff5e20);
        border: none;
      }
      .el-button--default {
        background-color: #fbf4f0;
        border: none;
        color: #655b56;
        margin-right: 20px;
      }
    }
  }
</style>
